<template>
    <div class="container">
        <van-sidebar v-model="active" @change="onChange">
            <van-sidebar-item v-for="item in kindList" :key="item.cat_id" :title="item.cat_name" />
        </van-sidebar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active: 0,
        }
    },
    props: ['kindList'],
    methods: {
        onChange(index) {
           this.$emit('my-click', index)  // 把索引抛给父组件
            console.log(index);
            this.active=index
        }
    }
}
</script>

<style lang="less" scoped>
/* 父级 flex 布局 */
.container {
    display: flex;
    height: 100vh;
}

.side-wrapper {
    width: 85px;
    /* 左侧固定宽 */
    overflow-y: auto;
}

.main-content {
    flex: 1;
    /* 右侧自适应 */
    overflow-y: auto;
}
</style>